import React, { Suspense } from 'react'
import { createBrowserRouter, Navigate } from 'react-router-dom'
import { Spin } from 'antd'
import ErrorBoundary from '@/components/ErrorBoundary'
import { AuthGuard, LoginGuard } from '@/components/AuthGuard'

// 懒加载组件
const Login = React.lazy(() => import('@/pages/Login'))
const Home = React.lazy(() => import('@/pages/Home'))

// 加载中组件
const PageLoading: React.FC = () => (
  <div className="flex items-center justify-center h-screen">
    <Spin size="large"/>
  </div>
)

// 路由配置
export const router = createBrowserRouter([
  {
    path: '/',
    element: <Navigate to="/login" replace />
  },
  {
    path: '/login',
    element: (
      <ErrorBoundary>
        <LoginGuard>
          <Suspense fallback={<PageLoading />}>
            <Login />
          </Suspense>
        </LoginGuard>
      </ErrorBoundary>
    )
  },
  {
    path: '/home',
    element: (
      <ErrorBoundary>
        <AuthGuard>
          <Suspense fallback={<PageLoading />}>
            <Home />
          </Suspense>
        </AuthGuard>
      </ErrorBoundary>
    )
  },
  {
    path: '*',
    element: <Navigate to="/login" replace />
  }
])